import React from 'react';
import { Card, Row, Col, Statistic, Table, Progress } from 'antd';
import { Line, Pie } from '@ant-design/plots';
import {
  AlertOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  ClockCircleOutlined
} from '@ant-design/icons';
import './styles.css';

const MonitoringOverview: React.FC = () => {
  // 监管执行统计数据
  const executionStats = {
    total: 1280,
    completed: 960,
    processing: 240,
    pending: 80
  };

  // 预警事件统计
  const alertStats = {
    total: 156,
    highRisk: 28,
    mediumRisk: 48,
    lowRisk: 80
  };

  // 监管规则覆盖率数据
  interface CoverageItem {
    type: string;
    value: number;
  }

  const coverageData: CoverageItem[] = [
    { type: '数据质量', value: 85 },
    { type: '安全合规', value: 92 },
    { type: '业务规范', value: 78 },
    { type: '风险控制', value: 88 },
    { type: '运营监管', value: 82 }
  ];

  // 近期预警趋势数据
  const trendData = [
    { date: '2023-12-01', value: 15 },
    { date: '2023-12-02', value: 12 },
    { date: '2023-12-03', value: 18 },
    { date: '2023-12-04', value: 25 },
    { date: '2023-12-05', value: 20 },
    { date: '2023-12-06', value: 16 }
  ];

  // 最新预警事件
  const latestAlerts = [
    {
      id: 'ALT001',
      type: '数据质量异常',
      level: 'high',
      source: '数据资源平台',
      time: '2023-12-07 14:30:00',
      status: 'pending'
    },
    {
      id: 'ALT002',
      type: '安全合规风险',
      level: 'medium',
      source: '交易系统',
      time: '2023-12-07 13:15:00',
      status: 'processing'
    },
    {
      id: 'ALT003',
      type: '业务规则违规',
      level: 'low',
      source: '用户行为分析',
      time: '2023-12-07 12:45:00',
      status: 'resolved'
    }
  ];

  // 图表配置
  const pieConfig = {
    data: coverageData,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      offset: '50%',
      content: ({ type, value }: CoverageItem) => `${type}\n${value}%`,
      style: {
        textAlign: 'center',
        fontSize: 14,
        fill: '#000000'
      }
    },
    legend: {
      position: 'bottom'
    },
    interactions: [{ type: 'element-active' }]
  };

  const lineConfig = {
    data: trendData,
    xField: 'date',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond'
    },
    label: {
      style: {
        fill: '#aaa'
      }
    }
  };

  // 预警事件表格列配置
  const columns = [
    {
      title: '预警编号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '预警类型',
      dataIndex: 'type',
      key: 'type'
    },
    {
      title: '风险等级',
      dataIndex: 'level',
      key: 'level',
      render: (level: string) => {
        const colors = {
          high: '#ff4d4f',
          medium: '#faad14',
          low: '#52c41a'
        };
        const labels = {
          high: '高风险',
          medium: '中风险',
          low: '低风险'
        };
        return (
          <span style={{ color: colors[level as keyof typeof colors] }}>
            {labels[level as keyof typeof labels]}
          </span>
        );
      }
    },
    {
      title: '来源',
      dataIndex: 'source',
      key: 'source'
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time'
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          pending: { color: '#faad14', text: '待处理' },
          processing: { color: '#1890ff', text: '处理中' },
          resolved: { color: '#52c41a', text: '已解决' }
        };
        return (
          <span style={{ color: statusMap[status as keyof typeof statusMap].color }}>
            {statusMap[status as keyof typeof statusMap].text}
          </span>
        );
      }
    }
  ];

  return (
    <div className="monitoring-overview">
      {/* 顶部统计卡片 */}
      <Row gutter={[16, 16]} className="stats-row">
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="监管执行总数"
              value={executionStats.total}
              prefix={<AlertOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
            <div className="sub-stats">
              <span>已完成: {executionStats.completed}</span>
              <span>处理中: {executionStats.processing}</span>
              <span>待处理: {executionStats.pending}</span>
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="高风险预警"
              value={alertStats.highRisk}
              prefix={<ExclamationCircleOutlined />}
              valueStyle={{ color: '#ff4d4f' }}
            />
            <Progress 
              percent={Math.round((alertStats.highRisk / alertStats.total) * 100)} 
              strokeColor="#ff4d4f"
              size="small"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="中风险预警"
              value={alertStats.mediumRisk}
              prefix={<ClockCircleOutlined />}
              valueStyle={{ color: '#faad14' }}
            />
            <Progress 
              percent={Math.round((alertStats.mediumRisk / alertStats.total) * 100)} 
              strokeColor="#faad14"
              size="small"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="低风险预警"
              value={alertStats.lowRisk}
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
            <Progress 
              percent={Math.round((alertStats.lowRisk / alertStats.total) * 100)} 
              strokeColor="#52c41a"
              size="small"
            />
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
      <Row gutter={[16, 16]} className="chart-row">
        <Col xs={24} md={12}>
          <Card title="监管规则覆盖率">
            <Pie {...pieConfig} />
          </Card>
        </Col>
        <Col xs={24} md={12}>
          <Card title="近期预警趋势">
            <Line {...lineConfig} />
          </Card>
        </Col>
      </Row>

      {/* 最新预警事件 */}
      <Card title="最新预警事件" className="table-card">
        <Table
          columns={columns}
          dataSource={latestAlerts}
          pagination={false}
          rowKey="id"
        />
      </Card>
    </div>
  );
};

export default MonitoringOverview; 